<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .datepicker {
            width: 350px;
            position: absolute;
        }

        .datepicker-header {
            width: 350px;
            height: 30px;
            background-color: #cdcdcd;
            line-height: 30px;
        }

        .datepicker-header .header-left {
            width: 40px;
            height: 30px;
            float: left;
            text-align: center;
        }

        .datepicker-header .header-right {
            width: 40px;
            height: 30px;
            float: left;
            text-align: center;

        }

        .datepicker-header .header-middle {
            width: 270px;
            height: 30px;
            float: left;
            text-align: center;
        }

        .datepicker-content {
            width: 350px;
            list-style: none;

        }

        .datepicker-content .content-header {
            width: 50px;
            height: 30px;
            font-size: larger;
            text-align: center;
            background-color: #e2f2ff;
        }

        .datepicker-content li {
            float: left;
        }

        .datepicker-content .content {
            width: 50px;
            height: 30px;
            text-align: center;
            background-color: #666666;
            color: #FFFFFF;
            line-height: 30px;

        }
    </style>
</head>
<body>
开始时间<input id="startTime">

结束时间<input id="endTime">

第一个时间<input id="firstTime">


</body>
<script src="js/jquery-1.11.3.js"></script>
<script>
    jQuery.fn.extend({
        datepicker: function (option) {
            var that = this;
            this.option = {dateformat: "yyyy年mm月dd日", date: new Date()};
            this.option = $.extend(this.option, option);

            $(this).bind("click", function (e) {
                var evt = window.event || e;
//                evt.stopPropagation();
                if (evt.cancelBubble) {
                    evt.cancelBubble = true;
                } else {
                    evt.stopPropagation();
                }
                var left, top;
                left = $(this).position().left;
                top = $(this).position().top + $(this).height();
                var str = `<div class="datepicker">
                                <div class="datepicker-header">
                                    <span class="header-left">左</span>
                                    <span class="header-middle">2017-10-16</span>
                                    <span class="header-right">右</span>
                                 </div>
                                    <ul class="datepicker-content">
                                    </ul>
                                  </div>`;
                if (!$(".datepicker").html()) {//说明已经存在
                    var _datepicker = $(str);
                    $("body").append(_datepicker);
                }
                $(".datepicker").css({left: left, top: top});

                that.create(that.option.date);
                that.setbind();
            });

            this.setbind = function () {
                var that = this;
                $(document).one("click", ".datepicker-content .content", function () {//解决绑定的时候 多次被调用
                    var date = $(this).attr("data-date");
                    that.val(date);
                    $(".datepicker").hide();
                });
                $(document).on("click", ".datepicker-header .header-left", function () {
                    var newDate = that.option.date;// 10月31  月份减少1  变成九月31  自动转换成了十月一号
                    newDate.setDate(1);
                    newDate.setMonth(newDate.getMonth() - 1);
                    that.create(newDate);
                    that.option.date = newDate;
                })
                $(document).on("click", ".datepicker-header .header-right", function () {
                    var newDate = that.option.date;// 10月31  月份减少1  变成九月31  自动转换成了十月一号
                    newDate.setDate(1);
                    newDate.setMonth(newDate.getMonth() + 1);
                    that.create(newDate);
                    that.option.date = newDate;
                })

                $(document).on("click", function () {
                    $(".datepicker").hide();
                })

            },
          this.create = function (date) {
                        $(".datepicker").show();
                        var year = date.getFullYear();
                        var month = (date.getMonth() + 1) < 10 ? "0" + (date.getMonth() + 1) : (date.getMonth() + 1);
                        var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
                        var dateStr = this.option.dateformat.replace("yyyy", year).replace("mm", month).replace("dd", day);
                        $(".header-middle").html(dateStr);
                        date.setDate(1);
                        var firstDayWeek = date.getDay();//获取第一天是星期几
                        date.setMonth(date.getMonth() + 1);//设置成下一个月
                        date.setDate(0);//下一个月的第0天 就上一个月的最后一天
                        var lastDay = date.getDate();
                        //前面一截打印空格
                        var str = "";
                        for (var i = 0; i < firstDayWeek; i++) {
                            str += "<li class=content>" + " " + "</li>";
                        }
                        //打印正确的日期
                        for (var j = 1; j <= lastDay; j++) {
                            let year = date.getFullYear();
                            let month = (date.getMonth() + 1) < 10 ? "0" + (date.getMonth() + 1) : (date.getMonth() + 1);
                            let day = j < 10 ? "0" + j : j;
                            let dateStr = this.option.dateformat.replace("yyyy", year).replace("mm", month).replace("dd", day);

                            str += "<li class=content  data-date=" + dateStr + " >" + j + "</li>"
                        }
                        var html = `<li class="content-header">天</li>
                                        <li class="content-header">一</li>
                                        <li class="content-header">二</li>
                                        <li class="content-header">三</li>
                                        <li class="content-header">四</li>
                                        <li class="content-header">五</li>
                                        <li class="content-header">六</li>`;
                        html += str;
                        $(".datepicker-content").html(html);
                    }
            $(this).click();
        }
    });


    $("#startTime").datepicker();
//    $("#firstTime").datepicker({dateformat: "yyyy/mm/dd"});
//    $("#endTime").datepicker({dateformat: "yyyy年mm月dd日"});
</script>
</html>